<template>
  <div class="recruit-wrap">
    <!--搜索-->
    <div class="bg-con">
      <span class="city" @click="openCity">{{address}}</span>
      <div class="icon1"><img src="../images/job/list/location.png" class="area" onclick="return false"/></div>
      <div class="search-con">
        <div class="icon3"><img src="../images/job/list/search.png" class="search" onclick="return false"/></div>
        <span class="name" @click="openSearch">请输入企业名称或关键字</span>
      </div>
    </div>

    <div class="recruit-box">
      <!--轮播图-->
      <div class="bg-box" id="picHeight">
        <swiper :options="swiperOption" class="pic-box" ref="mySwiper" v-if="slideList.length">
          <swiper-slide v-for="(slide,index) in slideList" :key="index">
            <img :src="slide.mechanismUrl" class="pic" onclick="return false"/>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>

      <!--播报-->
      <div class="ad-box" id="broadHeight">
        <div class="play-box">
          <img src="../images/job/list/play.png" class="play-pic"/>
          <span class="play-line"></span>
          <ul class="ad-con" :class="{active:animate == true}">
            <li class="title" v-for="(bar,index) in barList" :key="index">
              <div class="tip-box">
                恭喜<span class="line-height">{{bar.userName}}</span>入职成功<span
                class="line-height">{{bar.mechanismName}}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>


      <!--筛选-->
      <div class="roll-screen" id="searchHeight" :class="{'roll-box':isFixed}">
        <div class="condition-box">
          <div class="icon-box1">企业列表</div>
          <div class="icon-box">
            <div class="icon-box2" :class="{'choose':showModal}" @click="openCompanyModal">{{title2}}
              <img src="../images/job/list/pull.png" class="icon2" v-if="showModal" onclick="return false"/>
              <img src="../images/job/list/drop_down_sel.png" class="icon2" onclick="return false" v-else>
            </div>
            <div class="icon-box2" :class="{'choose':showScreen}" @click="openWorkModal">{{title1}}
              <img src="../images/job/list/pull.png" class="icon2" v-if="showScreen" onclick="return false"/>
              <img src="../images/job/list/drop_down_sel.png" class="icon2" onclick="return false" v-else>
            </div>
          </div>

          <div class="screen-modal" v-show="showScreen">
            <div class="screen-con">
              <div class="content-sec">
                <div class="sec" @click="queryWorkType(2,'全部工种')" :class="{'active2':workType == 2}">全部工种
                  <img src="../images/job/list/get.png" v-if="workType == 2" class="pic7" onclick="return false"/>
                </div>
                <div class="sec" @click="queryWorkType(1,'小时工')" :class="{'active2':workType == 1}">小时工
                  <img src="../images/job/list/get.png" v-if="workType == 1" class="pic7" onclick="return false"/>
                </div>
                <div class="sec" @click="queryWorkType(0,'正式工')" :class="{'active2':workType == 0}">正式工
                  <img src="../images/job/list/get.png" v-if="workType == 0" class="pic7" onclick="return false"/>
                </div>
              </div>
            </div>
          </div>

          <div class="company-modal" v-show="showModal">
            <div class="screen-con">
              <div class="content-sec">
                <div class="sec" @click="selectMechanism('all','全部企业')" :class="{'active2':mechanismType == 'all'}">
                  全部企业
                  <img src="../images/job/list/get.png" v-if="mechanismType == 'all'" class="pic7"
                       onclick="return false"/>
                </div>
                <div class="sec" v-for="(item,i) in mechanismList" :key="i"
                     @click="selectMechanism(item.id,item.mechanismTypeName)"
                     :class="{'active2':item.id == mechanismType}">{{item.mechanismTypeName}}
                  <img src="../images/job/list/get.png" v-if="item.id == mechanismType" class="pic7"
                       onclick="return false"/>
                </div>
              </div>
            </div>
          </div>

        </div>
        <!--推荐-->
        <div class="select-box">
          <div class="key" :class="{'active':orderType == '10'}" @click="queryType(10)">在招企业</div>
          <div class="key" :class="{'active':orderType == '8'}" @click="queryType(8)">高薪企业</div>
          <div class="key" :class="{'active':orderType == '9'}" @click="queryType(9)">有返费</div>
          <div class="key" :class="{'active':orderType == '4'}" @click="queryType(4)">可借支</div>
        </div>
      </div>

      <!--招工列表-->
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        class="work-van"
      >
        <div class="work-box">
          <div class="work-con" v-for="(item,index) in workList" :key="index" @click="openRecruit(item.id)">
            <div class="logo-box">
              <div class="logo-con">
                <img :src="item.mechanismUrl?item.mechanismUrl:require('../images/job/list/pic.png')" class="logo"
                     onclick="return false"/>
                <img src="../images/job/list/mask_re.png" v-show="item.status == 1" class="apply-icon"/>
                <span class="title" v-show="item.isApply == 0">已报名</span>
              </div>
            </div>

            <div class="company-box">
              <div class="name-box">
                <div class="company-con">
                  <div class="name">{{item.mechanismName}}</div>
                </div>
                <span class="et-lend" v-show="item.lendType == 1">可借支</span>
              </div>

              <div class="work-name">
                <span class="post-name">{{item.workTypeName}}</span>
                <span class="sex-title" v-show="item.age">{{item.age}}</span>
              </div>

              <div class="score-box">
                <span class="money-num" v-if="item.postType == 1">{{item.workMoney}}元/时</span>
                <span class="money-num" v-if="item.postType == 0">{{item.wageRange}}元/月</span>

                <div class="fee-box"
                     v-if="(item.postType == 0 && item.reStatus == 1 && item.reMoney > 0 && item.reTime > 0) || (item.postType == 1 && item.reStatus == 1 && item.addWorkMoney > 0 && item.reTime > 0)">
                  <span class="money-line"></span>
                  <span class="fee-money" v-if="item.postType == 0">返{{item.reMoney}}元</span>
                  <span class="fee-money"
                        v-else-if="item.postType == 1">返{{Math.floor(item.addWorkMoney * 10) / 10}}元/时</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-list>

      <div class="empty-wrap" v-if="workList.length == 0 && !loading">
        <div class="empty-box">
          <div class="img-box"><img src="../images/job/list/empty.png" class="empty" onclick="return false"/></div>
          <div class="tip">抱歉,未找到相关内容~</div>
        </div>
      </div>
    </div>

    <div class="cover-box1" v-show="showScreen" @click="closeWorkModal" @touchmove.prevent></div>
    <div class="cover-box2" v-show="showModal" @click="closeCompanyModal" @touchmove.prevent></div>

    <div class="work-mask_transparent-toast" v-if="showToast"></div>

    <div class="service-box" @click="quickJob">
      <img src="../images/job/list/fast.png" class="pic8" onclick="return false"/>
    </div>
  </div>
</template>

<script>
  import {baseUrl} from "../../../config/env";
  import {getSessionStore} from "../../../config/util"

  let vm = null;

  export default {
    name: "jobList",
    data() {
      return {
        address: "",
        userSign: "",
        identity: "",
        mechanismName: "",
        mechanismType: "all",
        workType: 2,
        orderType: "",
        currentPage: 1,
        pageSize: 20,
        slideList: [],
        workList: [],
        loading: false,
        finished: false,
        barList: [],
        animate: false,
        barTimer: null,
        timer: null,
        swiperOption: {
          notNextTick: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          autoplay: {
            delay: 3000,
            disableOnInteraction: false
          },
          loop: true,
          observer: true,
          observeParents: true,
          on: {
            click: function () {
              const realIndex = this.realIndex;
              vm.openRecruit(vm.slideList[realIndex].id);
            }
          },
        },
        showScreen: false,
        showModal: false,
        mechanismList: [],
        isFixed: false,//bar浮动
        offsetTop: 0,//触发bar浮动的阈值
        title1: "全部工种",
        title2: "全部企业",
        mark: true,
        showToast: false
      }
    },
    created() {
      vm = this;
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("et_user_sign"));
      this.queryMechanism();
    },
    mounted() {
      this.address = this.$route.query.city;
      if (this.address == "" || this.address == undefined || this.address == null) {
        this.address = "全国";
      }
      //计算高度
      let searchHeight = document.querySelector('#searchHeight').clientHeight;//搜索框高度
      let picHeight = document.querySelector('#picHeight').clientHeight;//轮播图高度
      let broadHeight = document.querySelector('#broadHeight').clientHeight;//广播高度
      this.offsetTop = picHeight + broadHeight + searchHeight;
      window.addEventListener('scroll', this.handleScroll);
    },
    methods: {
      handleScroll() {//监听滚动条滚动的距离
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop >= this.offsetTop) {
          this.isFixed = true;
        } else {
          this.isFixed = false;
        }
      },
      initVanList() {
        this.currentPage = 1;
        this.PageSize = 20;
        this.workList = [];
        this.loading = true;
        this.finished = false;
        if (this.loading) {
          this.onLoad();
        }
      },
      queryWorkType(key, val) {//根据工种查询
        this.workType = key;
        this.title1 = val;
        this.initVanList();
        this.closeWorkModal();
      },
      selectMechanism(key, val) {//根据企业查询
        this.mechanismType = key;
        this.title2 = val;
        this.initVanList();
        this.closeCompanyModal();
      },
      openCity() {//根据城市查找
        this.$router.push("/etSiteTree");
      },
      openWorkModal() {//打开工种筛选
        this.showScreen = true;
        this.isFixed = true;
        this.showModal = false;
        this.divScroll('.screen-modal');
      },
      closeWorkModal() {//关闭工种筛选
        this.showScreen = false;
        this.isFixed = false;
      },
      openCompanyModal() {//打开企业筛选
        this.showModal = true;
        this.isFixed = true;
        this.showScreen = false;
        this.divScroll('.company-modal');
      },
      closeCompanyModal() {//关闭企业筛选
        this.showModal = false;
        this.isFixed = false;
      },
      openSearch() {//打开搜索页面
        this.$router.push("/jobSearch");
      },
      onLoad() {
        if (!this.timer) {// 异步更新数据
          this.timer = setTimeout(() => {
            this.queryWorkList();
            this.timer = null;
          }, 500)
        }
      },
      queryWorkList() {//查询招工列表
        this.showToast = true;
        let area = this.address == "全国" ? "china" : this.address;
        this.axios.get(baseUrl + "/work_other/query_worklist?sgin=" + this.userSign + "&mechanismAddress=" + area + "&identity=" + this.identity + "&type=1" + "&mechanismName=" + this.mechanismName + "&mechanismTypeId=" + (this.mechanismType == 'all' ? '' : this.mechanismType) + "&workType=" + (this.workType == 2 ? '' : this.workType) + "&orderType=" + this.orderType + "&page=" + this.currentPage + "&size=" + this.pageSize).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data.slideshowList != null && resultObj.data.slideshowList.length > 0) {//热门企业
              this.slideList = resultObj.data.slideshowList;
            }

            if (resultObj.data.workBarsList != null && resultObj.data.workBarsList.length > 0) {//公告栏
              this.barList = resultObj.data.workBarsList;
              if (this.barTimer) {
                clearTimeout(this.barTimer);
              }
              this.$nextTick(() => {
                this.scrollUp();
              });
            }

            if (resultObj.data.workList != null && resultObj.data.workList.length > 0) {//招工数据
              this.workList = this.workList.concat(resultObj.data.workList);

              //加载状态结束
              this.loading = false;
              this.currentPage++;
            }
            else {
              this.loading = false;
              if (this.workList.length >= resultObj.data.workList.length) {
                this.finished = true;
              }
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
          this.showToast = false;
        }).catch(() => {
          this.showToast = false;
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      queryMechanism() {//查询所有行业和工种
        this.axios.get(baseUrl + "/work/query_mechanismlist").then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data.mechanismTypeList != null && resultObj.data.mechanismTypeList.length > 0) {
              this.mechanismList = resultObj.data.mechanismTypeList;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      openRecruit(id) {//招工详情
        this.$router.push({path: "/jobDetail", query: {id: id}});
      },
      queryType(index) {//根据条件查找(推荐好厂/高额返费)
        if (this.mark) {
          this.mark = false;
          this.orderType = index;
        } else {
          if (this.orderType == index) {
            this.mark = true;
            this.orderType = "";
          } else {
            this.mark = true;
            this.orderType = index;
          }
        }
        this.initVanList();
      },
      scrollUp() {//无缝滚动
        this.barTimer = setInterval(() => {
          this.animate = true;// 向上滚动的时候需要添加css3过渡动画
          setTimeout(() => {
            this.barList.push(this.barList[0]);// 将数组的第一个元素添加到数组的
            this.barList.shift(); //删除数组的第一个元素
            this.animate = false;
          }, 500)
        }, 1500);
      },
      quickJob() {
        this.$router.push("/jobQuick");
      },
      divScroll(layerNode) {//弹出层滚动条不影响到body
        //如果没有这个元素的话，那么将不再执行下去
        if (!document.querySelector(layerNode)) return;

        this.popupLayer = document.querySelector(layerNode);
        this.startX = 0;
        this.startY = 0;

        this.popupLayer.addEventListener('touchstart', function (e) {
          this.startX = e.changedTouches[0].pageX;
          this.startY = e.changedTouches[0].pageY;
        }, false);

        // 仿innerScroll方法
        this.popupLayer.addEventListener('touchmove', function (e) {

          e.stopPropagation();

          var deltaX = e.changedTouches[0].pageX - this.startX;
          var deltaY = e.changedTouches[0].pageY - this.startY;

          // 只能纵向滚
          if (Math.abs(deltaY) < Math.abs(deltaX)) {
            e.preventDefault();
            return false;
          }

          if (this.offsetHeight + this.scrollTop >= this.scrollHeight) {
            if (deltaY < 0) {
              e.preventDefault();
              return false;
            }
          }
          if (this.scrollTop === 0) {
            if (deltaY > 0) {
              e.preventDefault();
              return false;
            }
          }
          // 会阻止原生滚动
          // return false;
        }, false);
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    },
    destroyed() {
      window.removeEventListener('scroll', this.handleScroll)
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .recruit-wrap
    wh(100%, auto)
    .bg-con
      position: fixed
      top: 0
      z-index: 99
      display: flex
      align-items: center
      wh(100%, 1.2rem)
      background: #3CAFFF
      .icon1
        margin-right: 0.387rem
        wh(0.213rem, 0.213rem)
        .area
          wh(100%, 100%)
      .city
        margin-left: 3.2%
        margin-right: 0.107rem
        size-color(0.427rem, rgba(255, 255, 255, 1))
        font-weight: 500
      .search-con
        display: flex
        align-items: center
        flex: 1
        margin-right: 3.2%
        height: 0.8rem
        background: rgba(255, 255, 255, 1)
        border-radius(0.4rem)
        .icon3
          margin-left: 0.213rem
          margin-right: 0.24rem
          wh(0.48rem, 0.48rem)
          .search
            wh(100%, 100%)
        .name
          wh(80%, 0.6rem)
          size-color(0.373rem, #999)
          line-height: 0.6rem
    .recruit-box
      position: absolute
      top: 1.2rem
      bottom: 1.307rem
      wh(100%, 100%)
      .bg-box
        display: flex
        wh(100%, 4.64rem)
        .pic-box
          margin-top: 0.32rem
          wh(93.6%, 3.92rem)
          box-shadow: 0rem 0rem 0.08rem 0rem rgba(76, 76, 78, 0.15)
          border-radius: 0.16rem
          .pic
            object-fit: cover
            wh(100%, 3.92rem)
      .ad-box
        display: flex
        align-items: center
        wh(100%, 1.707rem)
        background: rgba(245, 245, 245, 1)
        .play-box
          display: flex
          align-items: center
          wh(100%, 1.15rem)
          background: rgba(255, 255, 255, 1)
          overflow: hidden
          .play-pic
            wh(1.84rem, 1.15rem)
          .play-line
            wh(0.027rem, 0.64rem)
            background: rgba(240, 240, 240, 1)
          .ad-con
            wh(8.16rem, 1.15rem)
            .title
              padding-left: 0.4rem
              wh(100%, 100%)
              size-color(0.373rem, #333333)
              .tip-box
                line-height: 1.15rem
                wh(7.44rem, 1.15rem)
                ellipsis()
                .line-height
                  color: #3CAFFF
                  font-weight: 500
          .active
            transition: all 0.5s
            margin-top: -2.3rem
      .roll-screen
        wh(100%, auto)
        .select-box
          display: flex
          align-items: center
          margin: 0 auto
          wh(93.33%, 1.12rem)
          .key
            fj(center, center)
            flex: 1
            wh(100%, 0.8rem)
            background: rgba(242, 242, 242, 1)
            border-radius(0.107rem)
            size-color(0.373rem, rgba(102, 102, 102, 1))
            &:nth-child(2)
              margin-left: 0.133rem
            &:nth-child(3)
              margin-left: 0.133rem
              margin-right: 0.133rem
          .active
            color: #3cafff
            background: #E4F4FF
        .condition-box
          position: relative
          fj(space-between, center)
          wh(100%, 1.04rem)
          .icon-box1
            margin-left: 0.333rem
            size-color(0.427rem, rgba(51, 51, 51, 1))
            font-weight: 500
          .icon-box
            display: flex
            margin-right: 0.333rem
            .icon-box2
              display: flex
              align-items: center
              size-color(0.387rem, #666)
              &:nth-child(1)
                margin-right: 0.4rem
              .icon2
                margin-left: 0.213rem
                wh(0.213rem, 0.213rem)
            .choose
              color: rgba(60, 175, 255, 1)
          .company-modal
            position: absolute
            top: 1.04rem
            z-index: 99
            wh(100%, 7.733rem)
            background-color: rgba(0, 0, 0, 0.5)
            overflow-y: auto
            .screen-con
              wh(100%, auto)
              background: #FFF
              border-top: 0.027rem solid #f2f2f2
              .content-sec
                display: flex
                flex-direction: column
                wh(auto, 100%)
                margin-left: 0.48rem
                margin-right: 0.507rem
                .sec
                  display: flex
                  align-items: center
                  height: 1.067rem
                  line-height: 1.067rem
                  size-color(0.427rem, rgba(102, 102, 102, 1))
                  &:nth-child(1)
                    margin-top: 0.267rem
                  &:last-child
                    padding-bottom: 0.16rem
                .active2
                  color: $color
                .pic7
                  margin-left: auto
                  wh(0.64rem, 0.64rem)
          .screen-modal
            position: absolute
            top: 1.04rem
            z-index: 99
            width: 100%
            background-color: rgba(0, 0, 0, 0.5)
            overflow: auto;
            .screen-con
              wh(100%, auto)
              background: #FFF
              border-top: 0.027rem solid #f2f2f2
              .content-sec
                display: flex
                flex-direction: column
                wh(auto, 100%)
                margin-left: 0.48rem
                margin-right: 0.507rem
                .sec
                  display: flex
                  align-items: center
                  height: 1.067rem
                  line-height: 1.067rem
                  size-color(0.427rem, rgba(102, 102, 102, 1))
                  &:nth-child(1)
                    margin-top: 0.267rem
                  &:last-child
                    padding-bottom: 0.16rem
                .active2
                  color: $color
                .pic7
                  margin-left: auto
                  wh(0.64rem, 0.64rem)
      .roll-box
        position: fixed
        wh(100%, auto)
        top: 1.2rem
        z-index: 99
        background: #FFF
      .work-van
        .work-box
          display: flex
          flex-direction: column
          wh(100%, auto)
          .work-con
            display: flex
            wh(100%, 2.293rem)
            .logo-box
              margin-top: 0.267rem
              margin-left: 0.32rem
              .logo-con
                position: relative
                wh(2.347rem, 1.76rem)
                .logo
                  wh(100%, 100%)
                  border-radius: 0.107rem
                  object-fit: cover
                .apply-icon
                  wh(100%, 100%)
                  position: absolute
                  z-index: 10
                  top: 0
                  left: 0
                  border-radius: 0.107rem
                  object-fit: cover
                .title
                  position: absolute
                  bottom: 0
                  fj(center, center)
                  wh(100%, 0.48rem)
                  background: rgba(0, 0, 0, 0.5)
                  border-bottom-left-radius: 0.16rem
                  border-bottom-right-radius: 0.16rem
                  size-color(0.333rem, rgba(255, 255, 255, 1))
            .company-box
              display: flex
              flex-direction: column
              margin-left: 0.28rem
              padding-top: 0.373rem
              margin-right: 0.24rem
              flex: 1
              position: relative
              .name-box
                display: flex
                align-items: center
                padding-bottom: 0.2rem
                .company-con
                  .name
                    padding-top: 0.05rem
                    size-color(0.4rem, rgba(51, 51, 51, 1))
                    font-weight: 500
                    width: 5.45rem
                    ellipsis()
                  .name-line
                    width: 6.95rem
                .et-lend
                  margin-left: 0.213rem
                  width: 1.013rem
                  padding-top: 0.05rem
                  padding-bottom: 0.05rem
                  border: 0.013rem solid rgba(60, 175, 255, 1)
                  border-radius: 0.053rem
                  size-color(0.267rem, rgba(60, 175, 255, 1))
                  line-height: 0.373rem
                  text-align: center
              .work-name
                display: flex
                align-items: center
                margin-bottom: 0.24rem
                .sex-title
                  size-color(0.293rem, rgba(153, 153, 153, 1))
                .post-name
                  size-color(0.373rem, #333)
                  font-weight: 500
                  padding-right: 0.24rem
                .money
                  margin-left: auto
                  text-align: right
                  size-color(0.373rem, rgba(255, 89, 89, 1))
                  font-weight: 500
              .score-box
                display: flex
                align-items: center
                font-size: 0.347rem
                .money-num
                  font-size: 0.347rem
                  font-weight: 500
                  color: rgba(60, 175, 255, 1)
                .fee-box
                  display: flex
                  align-items: center
                  .money-line
                    margin-left: 0.28rem
                    margin-right: 0.28rem
                    wh(0.027rem, 0.347rem)
                    background: #ccc
                  .fee-money
                    font-size: 0.347rem
                    font-weight: 500;
                    color: rgba(255, 143, 60, 1)
      .empty-wrap
        fj(center, center)
        wh(100%, auto)
        padding-bottom: 0.6rem
        .empty-box
          display: flex
          flex-direction: column
          align-items: center
          wh(80%, auto)
          .empty
            wh(4.773rem, 4.773rem)
          .tip
            display: flex
            justify-content: center
            margin-top: 0.387rem
            size-color(0.373rem, rgba(68, 68, 68, 1))
    .cover-box1
      position: fixed
      top: 5.68rem
      left: 0
      right: 0
      bottom: 0
      z-index: 102
      background-color: rgba(0, 0, 0, 0.5)
    .cover-box2
      position: fixed
      top: 9.947rem
      left: 0
      right: 0
      bottom: 0
      z-index: 102
      background-color: rgba(0, 0, 0, 0.5)
    .work-mask_transparent-toast
      position: fixed
      z-index: 1000
      top: 0
      right: 0
      left: 0
      bottom: 0
    .service-box
      position: fixed
      bottom: 0.8rem
      right: 0
      wh(1.76rem, 1.76rem)
      .pic8
        wh(100%, 100%)
</style>
